<template>
	<view class="participants" :style="'min-height: ' + (windowHeight + 44) + 'px'">
		<xbd-pages-content title="参会人员">
			<template #content>
				<view class="content">
					<view class="search">
						<uni-easyinput class="ipt" v-model="keyword" placeholder="搜索人员姓名"
							placeholderStyle="color: #999;"></uni-easyinput>
						<image src="@/static/images/common/search.svg" class="search-svg" @click="search"></image>
					</view>
					<view class="tree" v-if="!isSearch">
						<ly-tree ref="tree" node-key="id" expand-on-check-node show-checkbox :highlight-current="true"
							:default-expanded-keys="expandKeys" :default-checked-keys="checkedKeys"
							:props="defaultProps" @check="handleCheck" :toggleExpendAll="toggleExpendAll"
							:expandOnCheckNode="false" accordion lazy v-if="isReady" :load="loadNode" checkOnlyLeaf />
					</view>
					<view class="list" v-show="isSearch">
						<checkbox-group ref="checkbox" @change="checkboxChange" v-if="searchList.length">
							<label class="label" v-for="item in searchList" :key="item.id">
								<checkbox @change='checkbox(item.id,$event)' :value="item.id" :disabled="item.disabled"
									:checked="item.checked" style="transform:scale(0.7)" />
								<view class="search-item">
									<view class="name">
										{{ item.name }}
									</view>
									<view class="dept">
										{{ item.dept }}
									</view>
								</view>
							</label>
						</checkbox-group>
						<view class="null" v-else>
							暂无数据
						</view>
					</view>
				</view>
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	import {
		mapState
	} from 'vuex';
	var _self;
	import {
		Meeting
	} from '@/api/index.js';
	export default {
		components: {
			LyTree
		},
		computed: {
			...mapState(['windowHeight', 'userInfo'])
		},
		onLoad(res) {
			_self = this;
			this.isReady = true;
			const list = JSON.parse(res.checked);
			list.forEach(i => {
				this.checkedKeys.push(i.id);
			});
			this.checked = list;
			this.cd = JSON.parse(JSON.stringify(list));
		},
		onUnload() {
			let obj = {};
			this.checked = [...this.checked, ...this.cd];

			this.checked = this.checked.reduce(function(item, next) {
				obj[next.id] ? '' : obj[next.id] = true && item.push(next);
				return item;
			}, [])
			uni.$emit('participants', this.checked);
		},
		watch: {},
		methods: {

			checkbox(val, e) {
				if (!e.detail.value) {
					this.cd = this.cd.filter(item => {
						return item.id !== val
					})
				}
			},
			checkboxChange(e) {
				this.searchList.forEach(i => {
					this.checked = this.checked.filter(item => i.id !== item.id);
				})

				e.detail.value.forEach(i => {
					this.searchList.forEach(item => {
						if (item.id === i) {
							this.checked.push({
								id: item.id,
								name: item.name
							})
						}
					})
				})
			},
			async loadNode(node, resolve) {
				if (node.level === 0) {
					const res = await Meeting.getDepartment('', 'meeting');
					resolve(res.data.list);
				} else if (node.level === 1) {
					const list = [Meeting.getDepartment(node.data.id, 'meeting'), Meeting.getUser(node.data.id, 1)];
					const arr = await Promise.all(list);
					let newList = [];
					arr.forEach(item => {
						newList = [...newList, ...item.data.list];
					})
					newList.forEach(i => {
						if (i.id === _self.userInfo.user_id) {
							i.disabled = true;
						}
					})
					resolve(newList);
				} else if (node.level === 2) {
					const res = await Meeting.getUser(node.data.id, 2);
					res.data.list.forEach(i => {
						if (i.id === _self.userInfo.user_id) {
							i.disabled = true;
						}
					})
					resolve(res.data.list);
				}
			},
			handleCheck(obj) {
				if (!obj.node.checked) {

					this.cd = this.cd.filter(item => {
						return item.id !== obj.node.key
					})
					this.checked = this.checked.filter(item => {
						return item.id !== obj.node.key
					})
				} else {
					this.setChecked(obj.checkedNodes);
				}

			},
			setChecked(nodes) {
				nodes.forEach(node => {
					if (node?.children) {} else {
						this.checked.push({
							id: node.id,
							name: node.name
						});
					}
				})
			},
			async search() {
				if (this.keyword) {
					this.isSearch = true;
					try {
						const res = await Meeting.getUserList(this.keyword);
						const {
							success,
							data: {
								list
							}
						} = res;
						if (success) {
							list.forEach(item => {
								item.disabled = false;
								if (item.id === this.userInfo.user_id) {
									item.disabled = true;
								}
								item.checked = false;
								this.checked.forEach(i => {
									if (i.id === item.id) {
										item.checked = true;
									}
								})
							})
							this.searchList = list;
						}
					} catch (e) {}
				} else {
					this.isSearch = false;
					this.searchList.forEach(i => {
						this.checkedKeys = this.checkedKeys.filter(item => i.id !== item);
					})
					this.checked.forEach(i => {
						this.checkedKeys.push(i.id);
					});
					this.searchList = [];
				}
			},
		},
		data() {
			return {
				flag: false,
				isReady: false,
				isSearch: false,
				searchList: [],
				checked: [],
				delCheck: [],
				keyword: '',
				expandKeys: [],
				checkedKeys: [],
				toggleExpendAll: false,
				defaultProps: {
					children: 'children',
					label: 'name',
					isLeaf: 'isLeaf',
					disabled: 'disabled'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-easyinput__content {
		min-height: 32px;
		line-height: 32px;
	}

	.participants {
		background-color: #FFFFFF;

		.search {
			display: flex;
			justify-content: space-between;
			align-items: center;

			padding: 15px 50rpx;
			border-bottom: 1px solid #EEEEEE;

			box-sizing: border-box;

			&-svg {
				width: 36rpx;
				height: 36rpx;
				margin-left: 20rpx;
			}
		}

		.tree {
			padding: 0 30rpx;

		}

		.label {
			display: flex;
			align-items: center;

			padding: 15px 50rpx;
			border-bottom: 1px solid #EEEEEE;
		}

		.search-item {
			display: flex;
			align-items: center;

			box-sizing: border-box;

			.name {
				width: 4em;
				margin-right: 48rpx;
				text-align: left;

				font-size: 28rpx;
			}

			.dept {
				font-size: 24rpx;
			}
		}

		.null {
			color: #999999;
			margin-top: 50rpx;
			text-align: center;

			font-size: 32rpx;
		}
	}
</style>
